React Concurrent Modeで遊んだ
tosuke
超速雑スライド
誰?
54代 プログラミング研究会 Web班 tosuke
フロントLOVE
ReactReact.icon
複雑GUI作れるくん
クライアントでテンプレートを使えるようにするイメージ
Concurrent Mode is…
ドキュメントによると、「並列モード」
「並行」では？
端的に言うと、良い感じに非同期な値を扱えるモード
非同期な値?
様々な理由により、今手元にないが、いずれ届くことが分かっている値
https://gyazo.com/73d146f2c20a3455aeb71f6da010e419
まだ使えないがそのうち使えるようになる
つまりConcurrent Modeは
Reactがいい感じに値が使えるようになるのを待ってくれるモード
今までのアプリケーション
リンクをクリック→無が表示される→コンテンツが表示される
https://gyazo.com/c49bb9b030500a4ab24b38f48618aa88
これから
リンクをクリック→その場でちょっと待つ→コンテンツが表示される
待ち時間を超えると無が表示される
https://gyazo.com/3e8bb5921a0cb31bfe6bcb5c61ca3ace
Reactが処理待ちを管理するのでスムーズに画面遷移する
つくってみた
身内向けで使われてるチャットのクライアント
IDとパスワードで登録！
ストリームに対応している
すごい！でいつから使えるの？
年末にはReact v17系が出て、そこで使えるようになると思われていたが…
React v17では使えない
これからのReactのアップデートを円滑にするためのアップデート
つまりConcurrent ModeはReact v18以降
かなしい
/emoji/innocent.icon
希望
https://tweet-card.now.sh/1293251763450126336.jpg?lang=ja https://twitter.com/dan_abramov/status/1293251763450126336
ありがとうございました
終わるとは言っとらんが…
実装の話をします
オタク特有の早口モード
今まで
code:script.ts
useEffect(() => {
// 非同期処理
}, [])
// まだデータがない(待ち状態)なのでフォールバック
if (data == null) return fallback;
// data を使って描画
何が問題なのか？
Reactがアプリケーションが非同期待ちをしていることを知らない
知らないものはどうやってもいい感じにできない
これから
code:script.ts
// 天から非同期オブジェクトが降ってくる
// readは非同期処理が終わってるならその値を返し、
// 終わっていないならPromiseを例外として投げる
const data = loadable.read()
// data を使って描画
？？？
重要
Promiseを投げるとReactはそれを待つ
やばい
あなたのloadableはどこから？
A. さらに上から
code:script.tsx
useEffect(() => {
const l = /* 非同期オブジェクトを作る */
setLoadable(l)
},[])
// マウント直後は非同期オブジェクトすらないのでフォールバック
if(loadable == null) return fallback;
return (
/* Suspense以下の非同期処理を待って、フォールバックを表示 */
<Suspense fallback={fallback}><Component loadable={loadable}/></Suspense>
)
面倒じゃん。何がうれしいの？
Reactの非同期ハンドリングの恩恵を受けられる
非同期な値を普通の値と同じように扱える(.read())するかしないかの違いだけ
エラー処理も同じ！
Suspenseをどこに置くかで、どのデータを一度に出してほしいのか宣言的に決めることができる
その他にもいろいろ
useTransition、useDeferredValue、useMutableSourceなどの新たなるAPIたち
非同期処理を各コンポーネントの隣に書きつつ上位にまとめていくテクニック
エコシステムが育ってないので色々を自作したり…
楽死い！
ありがとうございます
みすポータルの改修を手伝ってくれる人を(細々と)募集しています
企画にするほどか？と思ってはいますが…
フロントエンドに興味がある人はぜひ